<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 定义玩家类型
interface Player {
  id: number
  nickname: string
  avatar: string
  introduction: string
  rating: number
  serviceCount: number
  tags: string[]
  price: number
}

// 订单信息
interface OrderInfo {
  player: Player
  hours: number
  service: string
}

const orderInfo = ref<OrderInfo | null>(null)
const hours = ref(1) // 默认1小时
const selectedService = ref('游戏陪玩') // 服务类型
const remark = ref('') // 备注

// 服务类型选项
const serviceTypes = [
  { label: '游戏陪玩', value: '游戏陪玩' },
  { label: '聊天陪伴', value: '聊天陪伴' },
  { label: '技术教学', value: '技术教学' },
]

// 计算总价
const totalPrice = computed(() => {
  if (!orderInfo.value) return 0
  return orderInfo.value.player.price * hours.value
})

// 订单时间选项
const hourOptions = [1, 2, 3, 4, 5, 6]

// 增加小时
const increaseHours = () => {
  if (hours.value < 6) {
    hours.value++
  }
}

// 减少小时
const decreaseHours = () => {
  if (hours.value > 1) {
    hours.value--
  }
}

// 支付功能
const handlePayment = () => {
  if (!orderInfo.value) {
    uni.showToast({
      title: '请选择陪玩玩家',
      icon: 'none',
    })
    return
  }

  // 模拟微信支付
  uni.showLoading({
    title: '跳转支付...',
  })

  setTimeout(() => {
    uni.hideLoading()

    // 实际应该调用微信支付API
    // uni.requestPayment({
    //   provider: 'wxpay',
    //   timeStamp: '',
    //   nonceStr: '',
    //   package: '',
    //   signType: 'MD5',
    //   paySign: '',
    //   success: (res) => {
    //     console.log('success:' + JSON.stringify(res));
    //   },
    //   fail: (err) => {
    //     console.log('fail:' + JSON.stringify(err));
    //   }
    // });

    uni.showModal({
      title: '支付成功',
      content: `已下单 ${hours.value} 小时的${selectedService.value}服务，总价 ¥${totalPrice.value}，玩家将与您联系！`,
      showCancel: false,
      success: () => {
        // 支付成功后返回首页
        uni.switchTab({
          url: '/pages/index/index',
        })
      },
    })
  }, 1500)
}

// 页面加载时获取选中的玩家信息
onMounted(() => {
  const selectedPlayer = uni.getStorageSync('selectedPlayer')
  if (selectedPlayer) {
    orderInfo.value = {
      player: selectedPlayer,
      hours: 1,
      service: '游戏陪玩',
    }
  }
})
</script>

<template>
  <view class="cart-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-content">
        <text class="nav-title">下单信息</text>
      </view>
    </view>

    <scroll-view class="cart-scroll" scroll-y>
      <!-- 没有选择玩家 -->
      <view v-if="!orderInfo" class="empty-cart">
        <text class="empty-icon">🛍</text>
        <text class="empty-text">请先选择陪玩玩家</text>
        <button class="back-btn" @tap="() => uni.switchTab({ url: '/pages/index/index' })">
          返回首页
        </button>
      </view>

      <!-- 有选择玩家 -->
      <view v-else class="order-content">
        <!-- 玩家信息卡片 -->
        <view class="player-card">
          <view class="card-header">
            <text class="card-title">玩家信息</text>
          </view>
          <view class="player-info">
            <image class="player-avatar" :src="orderInfo.player.avatar" mode="aspectFill" />
            <view class="player-details">
              <view class="player-name-row">
                <text class="player-name">{{ orderInfo.player.nickname }}</text>
                <view class="player-rating">
                  <text class="rating-star">⭐</text>
                  <text class="rating-score">{{ orderInfo.player.rating }}</text>
                </view>
              </view>
              <text class="player-intro">{{ orderInfo.player.introduction }}</text>
              <view class="player-tags">
                <view v-for="(tag, index) in orderInfo.player.tags" :key="index" class="tag">
                  {{ tag }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 服务类型选择 -->
        <view class="service-card">
          <view class="card-header">
            <text class="card-title">选择服务</text>
          </view>
          <view class="service-options">
            <view
              v-for="service in serviceTypes"
              :key="service.value"
              class="service-item"
              :class="{ active: selectedService === service.value }"
              @tap="selectedService = service.value"
            >
              <text class="service-label">{{ service.label }}</text>
              <text v-if="selectedService === service.value" class="check-icon">✔</text>
            </view>
          </view>
        </view>

        <!-- 时长选择 -->
        <view class="time-card">
          <view class="card-header">
            <text class="card-title">选择时长</text>
          </view>
          <view class="time-selector">
            <button class="time-btn" :disabled="hours <= 1" @tap="decreaseHours">-</button>
            <text class="time-value">{{ hours }} 小时</text>
            <button class="time-btn" :disabled="hours >= 6" @tap="increaseHours">+</button>
          </view>
          <view class="time-tips">
            <text class="tips-text">最多可选择6小时</text>
          </view>
        </view>

        <!-- 备注 -->
        <view class="remark-card">
          <view class="card-header">
            <text class="card-title">备注信息</text>
          </view>
          <textarea
            v-model="remark"
            class="remark-input"
            placeholder="请输入备注信息（选填）"
            maxlength="200"
          />
        </view>

        <!-- 费用明细 -->
        <view class="price-card">
          <view class="card-header">
            <text class="card-title">费用明细</text>
          </view>
          <view class="price-item">
            <text class="price-label">单价</text>
            <text class="price-value">¥{{ orderInfo.player.price }}/小时</text>
          </view>
          <view class="price-item">
            <text class="price-label">时长</text>
            <text class="price-value">{{ hours }} 小时</text>
          </view>
          <view class="price-divider"></view>
          <view class="price-item total">
            <text class="price-label">合计</text>
            <text class="price-total">¥{{ totalPrice }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view v-if="orderInfo" class="footer-bar">
      <view class="footer-price">
        <text class="price-label">合计：</text>
        <text class="price-symbol">¥</text>
        <text class="price-amount">{{ totalPrice }}</text>
      </view>
      <button class="pay-btn" @tap="handlePayment">立即支付</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.cart-container {
  min-height: 100vh;
  background-color: $brand-background-color;
  padding-bottom: 120rpx;
}

// 顶部导航
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx 0;

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;

    .nav-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

// 滚动区域
.cart-scroll {
  margin-top: 128rpx;
  height: calc(100vh - 248rpx);
}

// 空状态
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;

  .empty-icon {
    font-size: 120rpx;
    margin-bottom: 30rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
  }

  .back-btn {
    padding: 20rpx 60rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 40rpx;
    border: none;

    &::after {
      border: none;
    }
  }
}

// 订单内容
.order-content {
  padding: 20rpx;
}

// 通用卡片样式
.player-card,
.service-card,
.time-card,
.remark-card,
.price-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

  .card-header {
    margin-bottom: 24rpx;

    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

// 玩家信息
.player-info {
  display: flex;

  .player-avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 12rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
  }

  .player-details {
    flex: 1;

    .player-name-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;

      .player-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }

      .player-rating {
        display: flex;
        align-items: center;
        background: #fff5e6;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;

        .rating-star {
          font-size: 22rpx;
          margin-right: 4rpx;
        }

        .rating-score {
          font-size: 22rpx;
          color: #ff9500;
          font-weight: bold;
        }
      }
    }

    .player-intro {
      font-size: 24rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 12rpx;
    }

    .player-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8rpx;

      .tag {
        padding: 6rpx 12rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #ffffff;
        font-size: 20rpx;
        border-radius: 16rpx;
      }
    }
  }
}

// 服务选项
.service-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    position: relative;
    transition: all 0.3s;

    &.active {
      border-color: #667eea;
      background: rgba(102, 126, 234, 0.1);

      .service-label {
        color: #667eea;
        font-weight: bold;
      }
    }

    .service-label {
      font-size: 26rpx;
      color: #333;
    }

    .check-icon {
      position: absolute;
      top: 8rpx;
      right: 8rpx;
      font-size: 20rpx;
      color: #667eea;
    }
  }
}

// 时长选择
.time-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40rpx;

  .time-btn {
    width: 60rpx;
    height: 60rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    font-size: 36rpx;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      border: none;
    }

    &[disabled] {
      background: #e0e0e0;
      color: #999;
    }
  }

  .time-value {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    min-width: 160rpx;
    text-align: center;
  }
}

.time-tips {
  text-align: center;
  margin-top: 16rpx;

  .tips-text {
    font-size: 22rpx;
    color: #999;
  }
}

// 备注
.remark-input {
  width: 100%;
  min-height: 150rpx;
  padding: 20rpx;
  background: $brand-background-color;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
}

// 价格明细
.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;

  .price-label {
    font-size: 28rpx;
    color: #666;
  }

  .price-value {
    font-size: 28rpx;
    color: #333;
  }

  &.total {
    .price-label {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }

    .price-total {
      font-size: 40rpx;
      font-weight: bold;
      color: #ff4d4f;
    }
  }
}

.price-divider {
  height: 1rpx;
  background: #e0e0e0;
  margin: 16rpx 0;
}

// 底部操作栏
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;

  .footer-price {
    display: flex;
    align-items: baseline;

    .price-label {
      font-size: 26rpx;
      color: #666;
      margin-right: 8rpx;
    }

    .price-symbol {
      font-size: 28rpx;
      color: #ff4d4f;
      font-weight: bold;
    }

    .price-amount {
      font-size: 44rpx;
      color: #ff4d4f;
      font-weight: bold;
    }
  }

  .pay-btn {
    padding: 24rpx 60rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 40rpx;
    border: none;

    &::after {
      border: none;
    }
  }
}
</style>
